<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <span :class="!isLogin ? 'choosed_text' : 'unchoosed_text'"
              @click="changeToLogin">登录</span>
        /
        <span :class="isLogin ? 'choosed_text' : 'unchoosed_text'"
              @click="changeToRegister">注册</span>
      </div>
      <div class="center">
        <div class="login" v-if="isLogin">
          <div class="input_wrap">
            <span class="text">用户名</span>
            <input class="input" v-model="userName">
          </div>
          <div class="input_wrap">
            <span class="text">密码</span>
            <input class="input" type="password" v-model="passWord">
          </div>
          <div class="submit" @click="login">登录</div>
        </div>
        <div class="register" v-if="!isLogin">
          <div class="input_wrap">
            <span class="text">用户名</span>
            <input class="input" v-model="userName">
          </div>
          <div class="input_wrap">
            <span class="text">密码</span>
            <input class="input" type="password" v-model="passWord">
          </div>
          <div class="input_wrap">
            <span class="text">确认密码</span>
            <input class="input" type="password" v-model="passWordConfirm">
          </div>
          <div class="input_wrap">
            <span class="text">性别</span>
            <input class="input" v-model="sex">
          </div>
          <div class="input_wrap">
            <span class="text">学校</span>
            <input class="input" v-model="schoolName">
          </div>
          <div class="input_wrap">
            <span class="text">真实姓名</span>
            <input class="input" v-model="realName">
          </div>
          <div class="input_wrap">
            <span class="text">学院</span>
            <input class="input" v-model="collegeName">
          </div>
          <div class="input_wrap">
            <span class="text">班级</span>
            <input class="input" v-model="className">
          </div>
          <div class="input_wrap">
            <span class="text">入学年份</span>
            <input class="input" type="number" v-model="enterYear">
          </div>
          <div class="input_wrap">
            <span class="text">学号</span>
            <input class="input" type="number" v-model="studentId">
          </div>
          <div class="input_wrap">
            <span class="text">准考证号</span>
            <input class="input" type="number" v-model="examId">
          </div>
          <div class="input_wrap">
            <span class="text">录取通知书编号</span>
            <input class="input" type="number" v-model="admissionId">
          </div>
          <div class="input_wrap">
            <span class="text">工号</span>
            <input class="input" type="number" v-model="employId">
          </div>
          <div class="input_wrap">
            <span class="text">管理组织</span>
            <input class="input" v-model="organization">
          </div>
          <div class="submit" @click="register">注册</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import YBOpenApi from '@/service/YBOpenApi'
import loginService from '@/service/login'
import studentService from '@/service/student'

export default {
  name: 'Login',
  data () {
    return {
      isLogin: true,
      userName: '用户名',
      sex: '男',
      schoolName: '华南农业大学',
      realName: '萧离',
      collegeName: '数学与信息学院',
      className: '软件工程三班',
      enterYear: 2017,
      studentId: '201727010309',
      passWord: '123',
      passWordConfirm: '123',
      examId: '12345678910', // 准考证号
      admissionId: '12345678910', // 录取通知编号
      employId: '10086', // 工号
      organization: '学生会' // 该用户管理的组织
    }
  },
  async mounted () {},
  methods: {
    async login () {
      let loginData = {
        userName: this.userName,
        passWord: this.passWord
      }
      // 向yb_user表注册用户名等信息
      let YBUserResult = await YBOpenApi.login(loginData)
      YBUserResult = YBUserResult.data
      if (YBUserResult.code === -1) {
        alert(YBUserResult.msg)
        return
      }
      let loginUser = YBUserResult.data
      loginUser['token'] = 0
      loginUser['expires'] = 0
      loginUser['userid'] = loginUser.id
      this.setLoginUserInfo(loginUser)
      this.goToChoosen()
    },
    async register () {
      /**
      username=usernick=用户名
      sex=男/女
      money=0
      exp=0
      userhead=''
      schoolid=1
      schoolname 学校名 华南农业大学
      realname 真实姓名  萧离
      collegename 学院 数学与信息学院
      classname 班级名称 软件工程三班
      enteryear 入学年份 2017
      studentid 学号 201727010308
      examid 准考证号 12345678910
      admissionid 录取通知编号 12345678910
      employid 工号 10086
      organization 该用户管理的组织 学生会
       */
      if (this.sex !== '男' && this.sex !== '女') {
        alert('性别只能为男/女')
        return
      }
      if (this.passWord !== this.passWordConfirm) {
        alert('两次输入的密码不一致')
        return
      }
      let loginUser = {
        userName: this.userName,
        passWord: this.passWord,
        userNick: this.userName,
        sex: this.sex,
        money: 0,
        exp: 0,
        userhead: '',
        schoolId: 0,
        schoolName: this.schoolName,
        realName: this.realName,
        collegeName: this.collegeName, // 所在学院名称
        className: this.className, // 所在班级名称
        enterYear: this.enterYear, // 入学年份
        studentId: this.studentId, // 学号
        examineeId: this.examId, // 准考证号
        admissionId: this.admissionId, // 录取通知编号
        employId: this.employId, // 工号
        organization: this.organization // 该用户管理的组织
      }
      // 向yb_user表注册用户名等信息
      let YBUserResult = await YBOpenApi.insertYbUser(loginUser)
      YBUserResult = YBUserResult.data
      if (YBUserResult.code === -1) {
        alert('服务器发生异常，请稍后再试')
        return
      }
      let userid = YBUserResult.data.id // 从后端那里拿到yb_user的id
      // 向user表注册信息, 插入userId、college学院名、studentid学号、organization组织
      let updateUserRegisterInfoResult =
        await loginService.updateUserRegisterInfo(userid,
          this.organization, this.studentId, this.collegeName)
      updateUserRegisterInfoResult = updateUserRegisterInfoResult.data
      if (updateUserRegisterInfoResult.code === -1) {
        alert('服务器发生异常，请稍后再试')
        return
      }
      // 向student表注册信息，插入studentId学生id、name学生姓名、college学院
      let studentResult = await studentService.addStudent(this.studentId, this.realName, this.collegeName);
      studentResult = studentResult.data
      if (studentResult.code === -1) {
        alert('服务器发生异常，请稍后再试')
        return
      }
      loginUser = {
        token: 0,
        userid: userid,
        passWord: this.passWord,
        expires: 0,
        username: this.userName,
        usernick: this.userName,
        sex: this.sex,
        money: 0,
        exp: 0,
        userhead: '',
        schoolid: 0,
        schoolname: this.schoolName,
        realname: this.realName,
        collegename: this.collegeName, // 所在学院名称
        classname: this.className, // 所在班级名称
        enteryear: this.enterYear, // 入学年份
        studentid: this.studentId, // 学号
        examid: this.examId, // 准考证号
        admissionid: this.admissionId, // 录取通知编号
        employid: this.employId, // 工号
        organization: this.organization // 该用户管理的组织
      }
      this.setLoginUserInfo(loginUser)
      this.goToChoosen()
    },
    setLoginUserInfo (loginUser) {
      // 将用户信息放入vuex和session中
      this.$store.commit('initUser', loginUser)
      sessionStorage.setItem('LoginUser', JSON.stringify(loginUser))
      // 个人端需要用到vuex的Student
      this.$store.commit('studentLogin', loginUser)
    },
    goToChoosen () {
      // 转到选择端口
      this.$router.push({
        name: 'chooseport'
      })
    },
    changeToLogin () {
      this.isLogin = true
    },
    changeToRegister () {
      this.isLogin = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    height: 100%;
    background: $background-color;
    display:flex;
    flex-direction: column;
    justify-content: center;
    background: -webkit-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom,#9CDAF9,#965EE8); /* 标准的语法 */
    box-shadow: 0px 0px px2rem(3) px2rem(1) #D5C8F6;
    .content {
      display: block;
      width: 80%;
      height: 80%;
      margin: 0 auto;
      background: #FFF;
      border-radius: px2rem(10);
      border: 1px solid $splitline-color;
      overflow: auto;
      .top {
        margin: px2rem(10) auto 0;
        text-align: center;
        font-size: $text-size-imp;
        width: 100%;
        height: px2rem(30);
        line-height: px2rem(30);
        .choosed_text {
          //color: $text-color;
          color: black;
        }
        .unchoosed_text {
          //color: $unclick-color;
          color: red;
        }
      }
      .center {
        height: 90%;
        //border: 2px solid red;
        @mixin input_wrap {
          width: px2rem(260);
          height: px2rem(80);
          line-height: px2rem(20);
          margin: 0 auto;
          //border: px2rem(1) solid black;
          .text {
            display: block;
            text-align: center;
            height: px2rem(30);
            //border: px2rem(2) solid red;
            font-size: $text-size-imp;
            color: $text-color;
          }
          .input {
            width: 80%;
            height: px2rem(30);
            line-height: px2rem(30);
            display: block;
            margin: 0 auto;
            border:4px solid;
            border-image: -webkit-linear-gradient(to right,#9CDAF9,#965EE8) 30 30;
            border-image: -o-linear-gradient(to right,#9CDAF9,#965EE8) 30 30; /* Opera 11.1 - 12.0 */
            border-image: -moz-linear-gradient(to right,#9CDAF9,#965EE8) 30 30; /* Firefox 3.6 - 15 */
            border-image: linear-gradient(to right,#9CDAF9,#965EE8) 30 30; /* 标准的语法 */

            border-radius: px2rem(5);
            font-size: $text-size-imp;
            text-align: center;

          }
        }
        @mixin submit {
          display: block;
          width: px2rem(60);
          height: px2rem(40);
          line-height: px2rem(40);
          margin: 0 auto;
          text-align: center;
          color: white;
          font-size: $text-size-imp;
          //border: px2rem(2) solid black;
          border-radius: px2rem(10);
          background: -webkit-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Firefox 3.6 - 15 */
          background: linear-gradient(to bottom,#9CDAF9,#965EE8); /* 标准的语法 */
          box-shadow: 0px 0px px2rem(3) px2rem(1) #D5C8F6;
        }
        .login {
          transform: translate(0, 50%);
          .input_wrap {
            @include input_wrap
          }
          .submit {
            @include submit
          }
        }
        .register {
          //transform: translate(0, 20%);
          //border: px2rem(2) solid black;
          margin: px2rem(10) 0 0 0;
          height: 100%;
          overflow: auto;
          .input_wrap {
            @include input_wrap
          }
          .submit {
            @include submit
          }
        }
      }
    }

  }
</style>
